<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router"
import request from '@/api/request'
import { Delete, Edit, Search, Plus,Refresh} from '@element-plus/icons-vue'

let router = useRouter();
const rules = reactive({

})



let processRouteId=ref([]);
let isdisabled = ref(true)
let isdisabledreove = ref(true)
let isVisible = ref(false)
let data=ref()
let title = ref("")

let customerId = ref([])

let page = ref({
    current: 1,
    size: 5,
    total: 0,
    records: []
})

let process = ref({
    processRouteId:'',
    processRouteName:'',
    isEnabled:''
})

const handleSearch = ()=>{
    page.value.current = 1;
    loadData();

}

let loadData  = () => {
    request({
        url: '/process/index',
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            processRouteId: process.value.processRouteId,
            processRouteName: process.value.processRouteName,
            isEnabled: process.value.isEnabled
        }
    }).then(res => {
        page.value = res.data
    }).catch(err => {
        ElMessage.error('数据加载失败')
    })
}
loadData()




//加载

let refTanle = () => {
    isVisible.value = false;
    loadData();
}
let toInsert = () => {
    title.value = "新增工艺路线";
    isVisible.value = true;
    router.push("/material/process/insert");
}
let toUpdate = (row) => {
    data.value = { ...row };
    title.value = "修改工艺路线";
    isVisible.value = true;
    if(row!=null){
        data.value=row;
    }else{
        data.value=processRouteId.value[0]
    }
    router.push("/material/process/update");
}

//批量删除
let toRemove = () => {
    ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        let ids = processRouteId.value.map(item=>item.processRouteId)
        request({
            url: "/process/delete",
            method: "delete",
            data: ids
        }).then(res => {
            ElMessage.success('删除成功')
            loadData()
    })
    })
}
let toRemoves = (id) => {
    ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        request({
            url: "/process/delete",
            method: "delete",
            data: [id]
        }).then(res => {
            ElMessage.success('删除成功')
            loadData()
    })
    })
}



let fuxuankuang=(a)=>{
    processRouteId.value=a;
}

let  formRef =ref()
//重置
let chongzhi=()=>{
    process.value={
    processRouteName:"",
    isEnabled:""
    }
}
</script>

<template>
    <div>
        <el-card>
            <template #header>
                <div>
                    <el-row>
                       
                        <el-col >
                            <el-form ref="formRef" inline :model="process"
                                style="display: flex;justify-content: start;" class="card_wrap">
                                <el-form-item label="工艺路线编号" size="default" prop="processRouteId" class="c_item">
                                    <el-input v-model="process.processRouteId" class="sousuo"
                                        placeholder="请输入工艺路线编号" clearable @change=""></el-input>
                                </el-form-item>
                                <el-form-item label="工艺路线名称" size="default" prop="processRouteName" class="c_item">
                                    <el-input v-model="process.processRouteName" class="sousuo"
                                        placeholder="请输入工艺路线名称" clearable @change=""></el-input>
                                </el-form-item>
                                <el-form-item label="是否启用"  prop="isEnabled" class="c_item">
                                    <el-select placeholder="选择是或否" v-model="process.isEnabled" style="width: 150px;">
                                    <el-option value="0" label="是"></el-option>
                                    <el-option value="1" label="否"></el-option>
                            </el-select>
                                </el-form-item>
                                <el-form-item class="c_item">
                                    <template #default>
                                        <el-button type="primary" size="default" @click="handleSearch" icon="Search">搜索</el-button>
                                        <el-button type="info" size="default" :plain=true @click="chongzhi" icon="Refresh">重置</el-button>
                                        <p></p>
                                    </template>
                                </el-form-item>
                            </el-form>

                            <div style="margin-top: 20px;">
                                <el-button @click="toInsert" type="primary" :plain="true" icon="Plus">添加</el-button>
                                <el-button type="success" size="default" :plain=true @click="toUpdate(null)" icon="Plus" style="border:0px"
                                  :disabled="processRouteId.length!=1">修改</el-button>
                                <el-button type="danger" size="default" :plain=true @click="toRemove" icon="Delete" style="border:0px"
                                   :disabled="!processRouteId" >删除</el-button>
                            </div>

                            <el-table :data="page.records"  stripe @selection-change="fuxuankuang">
                                <el-table-column type="selection" width="40px" />
                                
                               <el-table-column prop="processRouteId" label="工艺路线编码"/>
                                <el-table-column prop="processRouteName" label="工艺路线名称"/>
                                <el-table-column prop="processRouteIllustrate" label="工艺路线说明"/>
                                <el-table-column prop="isEnabled" label="是否启用" #default="scope">
                                    <el-tag :type="scope.row.isEnabled=='0' ? 'primary':'danger'">{{ scope.row.isEnabled=="0"?"是":"否"}}</el-tag>
                                </el-table-column>
                                <el-table-column prop="remark" label="备注"/>

                                <el-table-column label="操作" style="width: 1000px;"fixed="right">
                            <template #default="scope" style="width: 1000px;">
                                 <el-button size="small" type="primary" @click="toUpdate(scope.row)" :row="scope.row"  icon="Plus">修改</el-button>
                                 <el-button size="small" type="danger" @click="toRemoves(scope.row.processRouteId)" icon="Delete">删除</el-button>
                            </template>
                        </el-table-column>
                            </el-table>
                             <el-pagination @current-change="(val) => { page.current = val; loadData() }" 
                                v-model:currentPage="page.current"
                                :page-sizes="[2, 4, 6, 8, 10]" :page-size="page.size" :total="page.total" background>
                            </el-pagination>
                        </el-col>
                    </el-row>
                    <div style="width:800px">
                        <el-dialog :title="title" v-model="isVisible" :destroy-on-close="true" width="60%">
                            <router-view @ref-table="refTanle" :data="data">
                            </router-view>
                        </el-dialog>
                    </div>

                </div>
            </template>

        </el-card>

    </div>
</template>

<style scoped>
.sousuo {
    width: 200px;
    /* margin-right: 100px; */
}

.card_wrap {
    width: 98%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.c_item {
    flex: 1;
    margin: 0px 0px 15px 0;
    width: calc((100%-10px)/4);
    min-width: calc((100% - 10px)/4);
    max-width: calc((100% - 10px)/4);

    &:nth-child(3n) {
        margin-right: 0;
    }
}
</style>